<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>号码地区分布/省市占比</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/province/beijing.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    //引入本地的各省市地图文件，可以使用绝对路径也可以使用相对路径，都可以，不过需要注意的是必须要引入这些地图，要不然是无法显示各省市地图的。

    <script type="text/javascript" src="../../statics/echarts/map/shanghai.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/neimenggu.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/taiwan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/xianggang.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/aomen.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/chongqing.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/tianjin.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/xinjiang.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/beijing.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/ningxia.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/qinghai.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/gansu.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/guangxi.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/hainan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/sichuan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/guizhou.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/yunnan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/xizang.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/shanxi1.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/guangdong.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/hunan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/hubei.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/henan.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/shandong.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/jiangxi.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/fujian.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/liaoning.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/jilin.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/heilongjiang.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/jiangsu.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/zhejiang.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/anhui.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/shanxi.js"></script>
    <script type="text/javascript" src="../../statics/echarts/map/hebei.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <div id="main" style="width: 800px;height:600px;"></div>
                <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var map = echarts.init(document.getElementById('main'));
        function randomData() {
            return Math.round(Math.random()*1000);
        }
        option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '号码分布',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        map.setOption(option);
    </script>
            </td>
            <td>
                <div id="chart" style="width: 400px;height:600px;"></div>
                <script type="text/javascript">
function showCity(city){
var pie = echarts.init(document.getElementById('chart'));
pie.setOption(option1 = {
    backgroundColor: '#404a59',
    series: [
        {
            type: 'map',
            mapType: city,
            label: {
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#389BB7',
                    areaColor: '#fff',
                },
                emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                }
            },
        }
    ]
});
}

showCity('上海');
        map.on('click', function (params) {
            city = params.name;
            alert(city);
            showCity(city);
        });
                </script>
            </td>
        </tr>
    </table>
</body>
</html>